<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM增删改</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css"/>
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>

    <script>
        $(function (){
            //将h1标签插入到div标签的前面
            // $("<h1>标题</h1>").prependTo($("div"));
            // //将h1标签插入到div标签的后面
            // $("<h1>标题2</h1>").insertAfter("div");

            //将h1标签插入到div之前
            // $("<h1>标题</h1>").insertBefore("div");

            //将div标签用h1标题替换
            //$("div").replaceWith("<h1>标题</h1>");

            //将所有的div用 h1标签替换
            // $("<h1>标题</h1>").replaceAll("div");


            //删除所有的div
            // $("div").remove();

            //清空所有的div的内容，但是会保留div标签
            $("div").empty();
        })

    </script>

</head>
<body>
<p id="text_show">
    内部插入<br/>
    appendTo()  a.appendTo(b)   把a插入到b子元素的末尾,变成最后一个子元素<br/>
    prependTo() a.prependTo(b)   把a插到b所有子元素的全面,成为第一个子元素<br/>

    外部插入<br/>
    insertAfter     a.insertAfter(b)    得到ba<br/>
    insertBefore    a.insertBefore(b)   得到ab<br/>

    替换<br/>
    replaceWith()   a.replaceWith(b)    用b替换掉a<br/>
    replaceAll()    a.replaceAll(b)     用a替换掉所有的b<br/>

    删除<br/>
    remove()    a.remove()  删除a标签<br/>
    empty()     a.empty()   清空a标签里面的内容<br/>




</p>

<br/>多选
<input type="checkbox" name="checkbox" checked="checked" value="checked" />checked
<input type="checkbox" name="checkbox" value="checked2" />checkbox2
<br/>
<br/>
<h1>标题</h1>
<div>1234</div>
<div>1234</div>


</body>
</html>